<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入js文件 -->
<!--  
<script type="text/javascript" th:src="@{/static/js/test.js}"></script>
-->
</head>
<body bgcolor="pink">
    <h2 align="center">欢迎来到本页面！</h2>
    <div>
       <label>用户姓名：</label>
       <input type="text" th:id="${user.name}" th:name="${user.name}" th:value="${user.name}"/><br>
       <label>用户年龄：</label>
       <input type="text" th:value="${user.age}"/><br>
       <!--
       <label>用户生日：</label>
       <input type="text" th:value="${user.birth}"/><br>
         -->
       <!-- 日期格式的转换 -->
       <label>用户生日：</label>
       <input type="text" th:value="${#dates.format(user.birth,'yyyy/MM/dd')}"/><br>
    </div>
    <br>
    
    <!-- 在上面的基础上进一步简化 -->
    <div th:object="${user}">
       <label>用户姓名：</label>
       <input type="text" th:id="*{name}" th:name="*{name}" th:value="*{name}"/><br>
       <label>用户年龄：</label>
       <input type="text" th:value="*{age}"/><br>
       <!-- 日期格式的转换 -->
       <label>用户生日：</label>
       <input type="text" th:value="*{#dates.format(birth,'yyyy/MM/dd')}"/><br>
    </div>  
    <br>
    
    text和 utext的区别：<br>
    <span th:text="${user.descs}">鄢承志</span> <br>
    <span th:utext="${user.descs}">鄢承志</span> <br>
    <!-- text不会解析标签，utext会解析标签样式 -->
    <br>
    
    URL的用法：<br>
       普通的链接写法：<a href="http://www.baidu.com">百度首页</a><br>
       使用themeleaf的写法：<a th:href="@{http://www.baidu.com}">百度首页</a><br>
    <br>
    
    <form th:action="@{/th/postForm}" th:object="${user}" th:method="POST">
    <label>姓名：</label>
    <input type="text" th:field="*{name}"/><br>
    <label>年龄：</label>
    <input type="text" th:field="*{age}"/><br>    
    <input type="submit" value="提交"/>
    </form>
    <br><br>
    
       判断语句的用法：<br>
    <div th:if="${user.age} lt 18">小妹妹太小了！</div>
    <div th:if="${user.age} == 18">十八美貌如花！</div>
    <div th:if="${user.age} gt 18">成年了哟，大姑娘！</div>
    <br>
    
        选择框的使用：<br>
    <select>
       <option>选择框</option>
       <option th:selected="${user.name} eq '鄢承志' ">鄢承志</option>
       <option th:selected="${user.name} eq '何立立' ">何立立</option>
       <option th:selected="${user.name} eq '游子意' ">游子意</option>
    </select>
    <br><br>
    
    each循环遍历：<br>
    <table style="border:2px solid yellow;">
       <thead align="center">
          <tr>
              <th>姓名</th>
              <th>年龄</th>
              <th>生日</th>
              <th>备注</th>
          </tr>
       </thead>
       <tbody align="center">
          <tr th:each="person:${userList}">
              <td th:text="${person.name}"></td>
              <td th:text="${person.age}"></td>
              <td th:text="${person.age} gt 23?你个老光棍！:小年轻们">23岁</td>
              <td th:text="${#dates.format(person.birth,'yyyy/MM/dd')}"></td>
              <td th:text="${person.descs}"></td>
          </tr>
       </tbody>
    </table>
    <br><br>
    
       测试switch分支：<br>
   <div th:switch="${user.name}">
      <p th:case=" '何立立' ">小女神</p>
      <p th:case="#{roles.manager}">普通管理员</p>
      <p th:case="#{roles.superadmin}">超级管理员</p>
      <p th:case="*">其他用户</p>
   </div>
</body>
</html>